@import './variables.scss';
@mixin colorBtn($color) {
    background: $color;
    &:hover {
        color: $color;
        &:before,
        &:after {
            background: $color;
        }
    }
}

.blue-btn {
    @include colorBtn($blue)
}

.light-blue-btn {
    @include colorBtn($light-blue)
}

.red-btn {
    @include colorBtn($red)
}

.pink-btn {
    @include colorBtn($pink)
}

.green-btn {
    @include colorBtn($green)
}

.tiffany-btn {
    @include colorBtn($tiffany)
}

.yellow-btn {
    @include colorBtn($yellow)
}

// .el-button--primary {
//     border: 1px solid #9cc2d8;
//     background-color: #f7f8f8;
//     color: #003366;
// }

/* button color */

[class^=el-icon-] {
    font-size: 14px;
}

.el-button--cyan.is-active,
.el-button--cyan:active {
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
    background-color: #afeeee;
    border-color: #48D1CC;
    color: red;
}

.el-button--cyan {
    background-color: #f7f8f8;
    border-color: #9cc2d8;
    color: #003366;
}